﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>妙笔生花</title>
	
	<meta name="keywords" content="">
	<meta name="description" content="">
	
	<link rel="apple-touch-icon-precomposed" href="http://mat1.gtimg.com/www/mb/images/microblog_72_72.png">
	<link rel="shortcut icon" href="http://mat1.gtimg.com/www/mb/favicon.ico">
	<style type="text/css">
		html{ overflow:auto}
		html,body{ width:100%; height:100%}
		body,div{margin:0;padding:0}
		body{font:12px/1.75 Tahoma,Arial;color:#333;background:#f3f3f3;_background-image:url(about:blank);_background-attachment:fixed}

		/*background image*/
		.lg_bg{ position:fixed; _position:absolute; width:100%;height:100%; z-index:-1; overflow:hidden}
		.lg_bg_in{position:absolute;width:100%;height:100%}
		.lg_bg img{ visibility:hidden}
		.lg_bg .on{ opacity:1; visibility:visible}
		
		/* logo */
		.lg_logo {
			width: 900px;
			padding-left: 100px;
			height: 77px;
			margin: 0 auto;
			border:1px solid red;
		}
		
		.lg_content {
			width: 1000px;
			height: 400px;
			margin: 10px auto;
			border:1px solid red;
		}
		
		.lg_foot {
			width: 1100px;
			height:100px;
			margin: 10px auto;
			border:1px solid blue;
		}
		
		.tile{
			margin-left:180px;
			margin-right:180px;
			margin-top:40px;
		}

	</style>
	
	<script type="text/javascript" src="/static/js/jquery.js"></script>
	<script type="text/javascript" src="/static/js/metrojs.js"></script>
	<link type="text/css" rel="stylesheet" href="/static/css/metrojs.css" >
	
	
</head>

<body>

	<div class="lg_bg" id="lg_bg">
			<img  src="http://mat1.gtimg.com/www/mb/images/login/theme/land.jpg" style="width: 1663px; height: auto; margin-left: 0px; margin-top: -357.33333333333337px; opacity: 1;" class="on" />
			<div id="master" style="opacity: 0;"></div>
	</div>

	<div class="lg_logo">
		<a href="http://t.qq.com" title="腾讯微博">腾讯微博</a>
	</div>

			
	<div class="lg_content">
		<div class="tile">
			<div id="tile1" class="live-tile red" data-delay="3500" data-initdelay="500">        
				<div>
					<a href="#">
						<img class="full" src="http://www.drewgreenwell.com/images/sample/1tw.gif" alt="first" />
					</a>
					<span class="tile-title">front title</span>	
				</div>
				
				<div>
					<p>this tile flips vertically vertically and swaps between images in order
						<span class="tile-title">back title</span>
					</p>
				</div>
			</div>
			
			<div id="tile2" class="live-tile red" data-delay="3500" data-initdelay="500">        
				<div>
					<a href="#">
						<img class="full" src="http://www.drewgreenwell.com/images/sample/1tw.gif" alt="first" />
					</a>
					<span class="tile-title">front title</span>	
				</div>
				
				<div>
					<p>this tile flips vertically vertically and swaps between images in order
						<span class="tile-title">back title</span>
					</p>
				</div>
			</div>
			
			<div id="tile3" class="live-tile red" data-delay="3500" data-initdelay="500">        
				<div>
					<a href="#">
						<img class="full" src="http://www.drewgreenwell.com/images/sample/1tw.gif" alt="first" />
					</a>
					<span class="tile-title">front title</span>	
				</div>
				
				<div>
					<p>this tile flips vertically vertically and swaps between images in order
						<span class="tile-title">back title</span>
					</p>
				</div>
			</div>
			
			<div id="tile4" class="live-tile red" data-delay="3500" data-initdelay="500">        
				<div>
					<a href="#">
						<img class="full" src="http://www.drewgreenwell.com/images/sample/1tw.gif" alt="first" />
					</a>
					<span class="tile-title">front title</span>	
				</div>
				
				<div>
					<p>this tile flips vertically vertically and swaps between images in order
						<span class="tile-title">back title</span>
					</p>
				</div>
			</div>
			
			
			<div id="tile5" class="live-tile red" data-delay="3500" data-initdelay="500">        
				<div>
					<a href="#">
						<img class="full" src="http://www.drewgreenwell.com/images/sample/1tw.gif" alt="first" />
					</a>
					<span class="tile-title">front title</span>	
				</div>
				
				<div>
					<p>this tile flips vertically vertically and swaps between images in order
						<span class="tile-title">back title</span>
					</p>
				</div>
			</div>
			
			
			<div id="tile6" class="live-tile red" data-delay="3500" data-initdelay="500">        
				<div>
					<a href="#">
						<img class="full" src="http://www.drewgreenwell.com/images/sample/1tw.gif" alt="first" />
					</a>
					<span class="tile-title">front title</span>	
				</div>
				
				<div>
					<p>this tile flips vertically vertically and swaps between images in order
						<span class="tile-title">back title</span>
					</p>
				</div>
			</div>
			
			
			<div id="tile7" class="live-tile red" data-delay="3500" data-initdelay="500">        
				<div>
					<a href="#">
						<img class="full" src="http://www.drewgreenwell.com/images/sample/1tw.gif" alt="first" />
					</a>
					<span class="tile-title">front title</span>	
				</div>
				
				<div>
					<p>this tile flips vertically vertically and swaps between images in order
						<span class="tile-title">back title</span>
					</p>
				</div>
			</div>
			
			<div id="tile8" class="live-tile red" data-delay="3500" data-initdelay="500">        
				<div>
					<a href="#">
						<img class="full" src="http://www.drewgreenwell.com/images/sample/1tw.gif" alt="first" />
					</a>
					<span class="tile-title">front title</span>	
				</div>
				
				<div>
					<p>this tile flips vertically vertically and swaps between images in order
						<span class="tile-title">back title</span>
					</p>
				</div>
			</div>
			
			
		</div>

	</div>

	<div class="lg_foot">
		
	</div>



	<script>
		$(function(){
			var imgs = [{src:'http://t3.qpic.cn/mblogpic/38ad50ebe63ee16bb9fa/220', alt:'2'},
                   {src:'http://t3.qpic.cn/mblogpic/df58a585849fa2a2d14c/220', alt:'3'},
                   {src:'http://t1.qpic.cn/mblogpic/bcb05cbae6422e48ae9e/220', alt:'4'},
                   {src:'http://t2.qpic.cn/mblogpic/3d0abb15b9988d91c44a/220', alt:'1'}
                  ];
				  
			$("#tile1").liveTile(
				{
				  mode:'flip',
				  swapFront: 'image',
				  frontImages: imgs,
				  //choose images in sequence from the array
				  frontIsRandom: true
				}
			);
			
			$("#tile2").liveTile(
				{
				  mode:'flip',
				  swapFront: 'image',
				  frontImages: imgs,
				  //choose images in sequence from the array
				  frontIsRandom: true
				}
			);
			
		})

	</script>

</body>
</html>